<template>
    <div class="home-banner">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="item in bannerList" :key="item.id" style="height: 150px;" class="banner-box">
                <img :src="item.imgUrl" class="banner-img"/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
import {getBannerList} from '@/apis/banner'
import { ref } from 'vue';
let bannerList = ref([])
// console.log(bannerList)

onMounted( async()=>{
    const res = await getBannerList()
    // console.log(res.result)
    bannerList.value=res.result
})
</script>

<style lang="scss" scoped>
.home-banner{
    width: 100%;
    height: 120px;
    background-color: #c82519;
    border-radius: 0 0 200px 200px / 0 0 30px 30px;
}
.banner-box{
    width: calc(100% - 20px);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-img{
    width: calc(100% - 20px);
    height: 100%;
    overflow: hidden;

}
</style>